{extend name='comm/base' /}

{block name='header'}
{include file='comm/header'}
{/block}

{block name='slider'}
{include file='comm/slider'}
{/block}

{block name='main'}
<div class="main-content">
    <div class="main-content-inner">
        <div class="breadcrumbs ace-save-state" id="breadcrumbs">
            <ul class="breadcrumb">
                <li>
                    <i class="ace-icon fa fa-home home-icon"></i>
                    <a href="#">系统设置</a>
                </li>
                <li class="active">菜单管理</li>
            </ul><!-- /.breadcrumb -->
        </div>
        <div class="page-content">

            <div class="page-header">
                <h1>
                    菜单
                    <small>
                        <i class="ace-icon fa fa-angle-double-right"></i>
                        新增菜单
                    </small>
                </h1>
            </div><!-- /.page-header -->
            <div class="row">
                <div class="col-xs-12">
                    <!-- PAGE CONTENT BEGINS -->
                    <form class="form-horizontal" role="form">
                        <div class="form-group">
                            <label class="col-sm-3 control-label no-padding-right" for="menu_name" > 菜单名</label>
                            <div class="col-sm-9">
                                <input type="text" id="menu_name" placeholder="菜单名" class="col-xs-10 col-sm-5" />
                            </div>
                        </div>

                        <div class="space-4"></div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label no-padding-right">菜单小图标</label>
                            <div class="col-sm-9">
                                <i class="ace-icon fa fa-leaf blue"></i>
                                <input type="text" id="icon_name" placeholder="菜单小图标" class="col-xs-10 col-sm-5" />
                            </div>
                        </div>

                        <div class="space-4"></div>
                        <div class="space-4"></div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label no-padding-right">父级菜单</label>
                            <div class="col-sm-3">
                                <select class="chosen-select form-control" id="parent_id" data-placeholder="Choose a State...">
                                    {if $pid == 0}
                                    <option value="0" selected>顶级菜单</option>
                                    {else /}
                                    <option value="0">顶级菜单</option>
                                    {/if}
                                    {volist name='list' id='list'}
                                        {if $pid == $list['id']}
                                        <option value="{$list['id']}" selected>{$list['name']|raw}</option>
                                        {else /}
                                        <option value="{$list['id']}">{$list['name']|raw}</option>
                                        {/if}
                                    {/volist}
                                </select>
                            </div>
                        </div>

                        <div class="space-4"></div>
                        <div class="space-4"></div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label no-padding-right" for="jump_url"> 链接</label>
                            <div class="col-sm-9">
                                <input type="text" id="jump_url" placeholder="跳转链接,不填则跳转首页" class="col-xs-10 col-sm-5" />
                            </div>
                        </div>


                        <div class="space-4"></div>
                        <div class="space-4"></div>


                        <div class="form-group">
                            <label class="col-sm-3 control-label no-padding-right">是否隐藏</label>
                            <div class="col-sm-3">
                                <select class="chosen-select form-control" id="is_hide" data-placeholder="Choose a State...">
                                    <option value="0">否</option>
                                    <option value="1">是 </option>
                                </select>
                            </div>
                        </div>
                        <div class="space-4"></div>
                        <div class="space-4"></div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label no-padding-right" for="remark"> 备注</label>
                            <div class="col-sm-9">
                                <input type="text" id="remark" placeholder="备注" class="col-xs-10 col-sm-5" />
                            </div>
                        </div>
                        <div class="space-4"></div>
                        <div class="space-4"></div>

                        <div class="clearfix form-actions">
                            <div class="col-md-offset-3 col-md-9">
                                <button class="btn btn-primary" type="button" id="save_btn">
                                    保存
                                </button>
                            </div>
                        </div>

                        <div class="hr hr-24"></div>
                    </form>

                    <!-- PAGE CONTENT ENDS -->
                </div><!-- /.col -->
            </div><!-- /.row -->
        </div><!-- /.page-content -->
    </div>
</div><!-- /.main-content -->
{/block}

{block name='footer'}
{include file='comm/footer'}
{/block}
{block name='script'}

<script src="__ace_js__/jquery-2.1.4.min.js"></script>

<!-- <![endif]-->
<!--[if IE]>
<script src="__ace_js__/jquery-1.11.3.min.js"></script>
<![endif]-->
<script type="text/javascript">
    if('ontouchstart' in document.documentElement) document.write("<script src='__ace_js__/jquery.mobile.custom.min.js'>"+"<"+"/script>");
</script>
<script src="__ace_js__/bootstrap.min.js"></script>

<!-- ace scripts -->
<script src="__ace_js__/ace-elements.min.js"></script>
<script src="__ace_js__/ace.min.js"></script>
<script src="__ace_js__/chosen.jquery.min.js"></script>
<script lang="javascript">
$('#save_btn').click(function(){
    var menu_name = $('#menu_name').val();
    var icon_name = $('#icon_name').val();
    var parent_id = $('#parent_id').val();
    var jump_url =  $('#jump_url').val();
    var is_hide = $('#is_hide').val();
    var remark = $('#remark').val();
    if(menu_name == ''){
      swal({
          type: 'warning', // 弹框类型
          title: '请输入菜单名称', //标题
          confirmButtonColor: '#438EB9',// 确定按钮的 颜色
          confirmButtonText: '确定',// 确定按钮的 文字
      });
      return false;
    }
    $.ajax({
        url:"{:url('admin.menu.store')}",
        type:'POST',
        dataType:'JSON',
        data:{'menu_name':menu_name,'icon_name':icon_name,'parent_id':parent_id,'jump_url':jump_url,'is_hide':is_hide,'remark':remark,"token":$("meta[name='token']").attr('content')},
        success:function(res){
            if(res.code == 1){
                swal({
                    type: 'success', // 弹框类型
                    title: '操作成功', //标题
                    confirmButtonColor: '#438EB9',// 确定按钮的 颜色
                    confirmButtonText: '确定',// 确定按钮的 文字
                }).then((isConfirm) => {
                    //判断 是否 点击的 确定按钮
                    if (isConfirm.value) {
                        location.href = "{:url('admin.menu.index')}";
                    }
                });
            }else{
                swal({
                    type: 'warning', // 弹框类型
                    title:res.msg, //标题
                    confirmButtonColor: '#438EB9',// 确定按钮的 颜色
                    confirmButtonText: '确定',// 确定按钮的 文字
                });
            }
            return false;
        },error:function(e){
            swal({
                type: 'error', // 弹框类型
                title:e.msg, //标题
                confirmButtonColor: '#438EB9',// 确定按钮的 颜色
                confirmButtonText: '确定',// 确定按钮的 文字
            });
        }
    })
})


</script>
{/block}






